<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/demo.css" rel="stylesheet">
    <style>
        .el-table .warning-row {
            background: white;
        }

        .el-table .success-row {
            background: whitesmoke;
        }
        body{
            align-self: center;
            font-size: 12px;
        }

    </style>
</head>
<body>


<div id="main">

    <div id="app" align="center">
        <div id="tabs-1" role="tabpanel" aria-hidden="false">
            <form action="javascript:;">
                <div class="form1">
                    <label>出发地:</label>
                    <div>
                        <template>
                            <el-select v-model="value1" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.label">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                    <div>
                        <label>目的地:</label>
                        <div>
                            <template>
                                <el-select v-model="value2" clearable placeholder="请选择">
                                    <el-option
                                            v-for="item in options2"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.label">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                    </div>
                    <div>
                        <el-date-picker
                                v-model="departureTime"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>

                    <div>
                        <el-row>
                            <el-button type="success" round @click="show">提交</el-button>
                        </el-row>
                    </div>
                </div>
            </form>
            <span></span>
            <template>
                <el-table
                        :data="List"
                        border
                        :row-class-name="tableRowClassdeparture">
                    style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="departure"
                            label="出发地"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="arrival"
                            label="目的地"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="flightNumber"
                            label="航班号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="airLine"
                            label="航空公司"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格"
                            width="150">
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/demo.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

</div>
</body>
</html>